<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<!--[if IE ]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
	<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
	<meta name="robots" content="index, follow">
	<title>Schuldendossier</title>
	<link rel="stylesheet" href="css/style.css">
	<!-- script src="js/zepto.min.js"></script -->
	<!-- script src="js/underscore-min.js"></script -->
	<!-- script src="js/mustache.js"></script -->
	<!-- script src="js/ICanHaz.min.js"></script -->
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.address-1.4.min.js"></script>
	<script src="js/snn.js"></script>
	
	<script id="infopage" type="text/html">
	<div class="content-box">
		<p>{{intro}}</p>
	</div>
	</script>
	<script id="tabset" type="text/html">
	<ul id="{{id}}" class="tabset">
		{{#tabs}}{{> tabset.tab}}{{/tabs}}
	</ul>
	</script>
	<script id="tabset.tab" type="text/html">
	<li>
		<h2>{{title}}</h2>
		<div>
			<p>{{content}}</p>
		</div>
	</li>
	</script>
	
	<script> /*
	var appStructure = {
		employee: {
			intro: "Dit is het infoscherm voor mederwerkers",
			tabs: [
				{title:"Aanmeldingen",content:"Lijst met nieuwe aanmeldingen"},
				{title:"Wachtend",content:"Lijst met dossiers in behandeling"}
			]
		},
		admin: {
			intro: "Dit is het infoscherm voor admins"
		},
		organisation: {
			intro: "Dit is het infoscherm voor organisaties"
		},
		client: {
			intro: "Dit is het infoscherm voor clienten",
			tabs: [
				{title:"Mijn dossier","Dossier overzicht"}
			]
		}
	}
	
	$(document).ready(function () {
		return;
		$.each(appStructure,function(key,value){
			$("#content").append(ich.infopage(value));
		});
	}); */
	</script>
</head>
<body>
	<div class="wrapper">
		<header>
			<nav>
				<p>Informatie over <strong>schuldendossier.nl</strong> voor:</p>
				<ul>
					<li><a href="/test">Cliënten</a></li>
					<li><a href="#">Hulpverleners</a></li>
					<li><a href="#">Gemeenten</a></li>
					<li><a href="#">Schuldeisers</a></li>
				</ul>
			</nav>
			<form>
				<p>Login:</p>
				<p>
				<label for="userid">Gebruikersnaam</label>
				<input id="userid" name="userid" type="text">
				</p>
				<p>
				<label for="password">Wachtwoord</label>
				<input id="password" name="password" type="password">
				</p>
			</form>
		</header>
		<div id="content" class="content">
			<ul class="tabset">
				<a href="#" class="online-help">Help</a>
				<li class="active">
					<h2>Schuldendossier</h2>
					<div>
						<p>My content</p>
					</div>
				</li>
				<li>
					<h2>Mijn gegevens</h2>
					<div>
						<p>My content</p>
					</div>
				</li>
				<li>
					<h2>Mijn dossier</h2>
					<div>
						<p>My content</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>